<template>
  <div class="page order">
    <custom title="确认支付" is-back />
    <div class="flex justify-center align-center flex-direction top">
      <div class="topText">订单总额</div>
      <div class="topPrice"><span class="topPriceIcon">¥</span>497.90</div>
      <div class="topNum">已优惠: <span class="topNumIcon">¥ 0.00</span></div>
    </div>
    <div class="deduction">
      <div class="dedTop">积分抵扣</div>
      <div class="flex justify-sb dedBox" @click="deduction.select = !deduction.select">
        <div class="flex align-center dedBoxTit">
          <img src="@/assets/integralConfirmOrder/collection.png" alt="" class="dedBoxImg" />
          <div>积分: 10</div>
        </div>
        <div :class="['dedBoxOut', deduction.select?'dedBoxOutAct':'']"><div class="dedBoxInn"></div></div>
      </div>
    </div>
    <div class="deduction">
      <div class="dedTop">在线支付</div>
      <div v-for="(item, index) in list" :key="index" class="flex justify-sb dedBox" @click="onSelType(index)">
        <div class="flex align-center dedBoxTit">
          <img :src="item.img" alt="" class="dedBoxImg" />
          <div>{{ item.title }}</div>
        </div>
        <div :class="['dedBoxOut', item.select?'dedBoxOutAct':'']"><div class="dedBoxInn"></div></div>
      </div>
    </div>
    <div class="comfirmBut" @click="onSend()">确认支付</div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
export default {
  name: 'Coupon',
  components: { custom },
  data() {
    return {
      list: [{
        img: require('@/assets/integralConfirmOrder/wx.png'),
        title: '微信支付',
        select: true
      }, {
        img: require('@/assets/integralConfirmOrder/zfb.png'),
        title: '支付宝支付',
        select: false
      }, {
        img: require('@/assets/integralConfirmOrder/yl.png'),
        title: '云闪付',
        select: false
      }],
      deduction: {
        select: false
      }
    }
  },
  created() {
  },
  methods: {
    // 选择支付方式
    onSelType(index) {
      this.list.map(i => { i.select = false })
      this.list[index].select = true
    },
    onSend() {
      this.$router.push('/integralPaySucc')
    }
  }
}
</script>

<style scoped>
.page{
  background: #F2F2F2;
}
.top{
  height: 210px;
  background: #fff;
  line-height: 1rem;
}
.topText{
  font-size: 26px;
  color: #8B8B8B;
}
.topPrice{
  font-size: 46px;
  color: #000000;
  margin: 20px 0;
  font-weight: 500;
}
.topPriceIcon{
  font-size: 26px;
}
.topNum{
  color: #8B8B8B;
  font-size: 26px;
}
.topNumIcon{
  color: #000000;
}
.deduction{
  margin-top: 20px;
}
.dedTop{
  padding: 32px 30px;
  background: #fff;
  border-bottom: 1px solid #E8E8E8;
}
.dedBox{
  background: #fff;
  padding: 45px 30px;
  line-height: 1rem;
}
.dedBoxTit{
  font-size: 32px;
  color: #000000;
}
.dedBoxImg{
  width: 36px;
  height: 36px;
  display: block;
  margin-right: 30px;
}
.dedBoxOut{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #C9C9C9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dedBoxInn{
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
}
.dedBoxOutAct{
  background: #F35517;
  border: 1px solid #F35517;
}
.comfirmBut{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  line-height: 120px;
  background: #F35517;
  font-size: 32px;
  color: #FFFFFF;
  text-align: center;
}
</style>
